<template>
  <div class="tabs-box">
    <div v-for="item in tabslist" :key="item.value" @click="$emit('active',item.value)" :class="{tabitem:true,tabactive:item.value===isValue}">{{item.label}}</div>
  </div>
</template>

<script>
export default {
  props:{
    tabslist:{
      type:Array
    },
    isValue:{
      type:String
    }
  }
}
</script>

<style lang="less" scoped>
  .tabs-box{
    display: flex;
    align-items: cneter;
    margin:10px 0;
    .tabitem{
      cursor: pointer;
      border-bottom: 2px #ebebeb solid;
      padding: 10px;
      margin-right: 10px;
      &:hover{
        color: #1890FF;
        border-color: #1890FF;
      }
    }
    .tabactive{
      color: #1890FF;
      border-color: #1890FF;
    }
  }
</style>
